<template>
  <p>通用 column-type 属性设置特殊列</p>
  <p>column-type 子项可设置为对象形式，用于扩展自定义插槽与列宽</p>
  <p>可选 index 序号列，expand 展开行操作列，handle 自定义操作列</p>
  <p>选中列可分为 selection / multiple 类型，当分页禁用时仅允许使用 selection</p>
  <p>展开行可通过具名插槽 expand 实现渲染内容</p>
  <p>通过 handles 属性设置自定义操作按钮下拉菜单项</p>
  <p>通过 handler-click 函数监听自定义操作按钮点击事件，返回是否刷新表单的状态</p>
  <MerakXTable
    :columns-by-store="JSON.parse(JSON.stringify(state.columns))"
    :columns="state.columns"
    :data="state.data"
    :pagination="false"
    :column-type="['index', 'selection', 'expand', { type: 'handle', width: 300, slot: 'handler' }]"
    :handles="[{ type: 'delete', text: '删除' }]"
    :handler-click="handleHanlerClick"
  >
    <template #expand="{ row }">
      <div>{{ row.description }}</div>
    </template>
    <template #handler="{ row }">
      <div style="display: flex">
        <el-button>查看详情</el-button>
        <el-button>删除 {{ row.name }}</el-button>
      </div>
    </template>
  </MerakXTable>
  <slot :html="html" />
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";

import { ElButton } from "element-plus";

import MerakXTable, { MerakXTableInstance, MerakXTableColumn } from "../../../../../components/MerakXTable";

const html = ref(`
<template>
  <div style="height: 70vh">
    <MerakXTable
      :columns-by-store="JSON.parse(JSON.stringify(state.columns))"
      :columns="state.columns"
      :data="state.data"
      :pagination="false"
      :column-type="['index', 'selection', 'expand', { type: 'handle', width: 300, slot: 'handler' }]"
      :handles="[{ type: 'delete', text: '删除' }]"
      :handler-click="handleHanlerClick"
    >
      <template #expand="{ row }">
        <div>{{ row.description }}</div>
      </template>
      <template #handler="{ row }">
        <div style="display: flex;">
          <el-button>查看详情</el-button>
          <el-button>删除 {{ row.name }}</el-button>
        </div>
      </template>
    </MerakXTable>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";

import MerakXTable, { MerakXTableInstance, MerakXTableColumn } from "../../../../../components/MerakXTable";

const state = reactive<{
  columns: MerakXTableColumn[];
  data: any[];
}>({
  columns: [
    { field: "name", title: "Name" },
    { field: "age", title: "Age" },
    { field: "address", title: "Address" }
  ],
  data: [
    {
      id: "1",
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park",
      description: "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."
    },
    {
      id: "2",
      name: "Jim Green",
      age: 42,
      address: "London No. 1 Lake Park",
      description: "My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."
    },
    {
      id: "3",
      name: "Not Expandable",
      age: 29,
      address: "Jiangsu No. 1 Lake Park",
      description: "This not expandable"
    },
    {
      id: "4",
      name: "Joe Black",
      age: 32,
      address: "Sydney No. 1 Lake Park",
      description: "My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park."
    }
  ]
});

const handleHanlerClick:MerakXTableInstance['handlerClick'] = async ({type, params}) => {
  console.log(type, params)
  return false
};
<\/script>
`);

const state = reactive<{
  columns: MerakXTableColumn[];
  data: any[];
}>({
  columns: [
    { field: "name", title: "Name" },
    { field: "age", title: "Age" },
    { field: "address", title: "Address" }
  ],
  data: [
    {
      id: "1",
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park",
      description: "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."
    },
    {
      id: "2",
      name: "Jim Green",
      age: 42,
      address: "London No. 1 Lake Park",
      description: "My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."
    },
    {
      id: "3",
      name: "Not Expandable",
      age: 29,
      address: "Jiangsu No. 1 Lake Park",
      description: "This not expandable"
    },
    {
      id: "4",
      name: "Joe Black",
      age: 32,
      address: "Sydney No. 1 Lake Park",
      description: "My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park."
    }
  ]
});

const handleHanlerClick: MerakXTableInstance["handlerClick"] = async ({ type, params }) => {
  console.log(type, params);
  return true;
};
</script>
